<template>
	<view class="">
      <image class="bg" :src="bgImgUrl" mode=""></image>
	  <view class="contentInfo">
		  <!-- 顶部 -->
		  <view class="topInfo">
		  	<view class="rules" @click="drawRules">抽奖规则</view>
		  	<image class="topImg" :src="topImgUrl"></image>
			<view class="shareBg">
				<image class="shareImg" :src="shareImgUrl"></image>
				<text style="margin-top: 38upx; margin-left: 5upx;">分享</text>
			</view>
			<button style="position: absolute; right: 0;  width: 100upx; height: 100upx; opacity: 0;" type="default" open-type="share"></button>
		  </view>
	      
		  <!-- 抽奖机 -->
		  <view class="centerInfo">
		  	<image class="machineImg" :src="machineImgUrl"></image>
			<image class="cjImg" :src="cjImgUrl"></image>
			<text class="winNumber">{{resultNumber}}</text>
			<view class="prizeBg">
			 <slot-machine 
			        ref="myLucky"
			        width="270px"
			        height="80px"
			        :slots="slots"
			        :prizes="prizes"
			        :defaultConfig="defaultConfig"
					@end="luckyDrawFinish"
			  ></slot-machine>
			  <view class="playBtn" @click="getluckyDraw"></view>
			  <view class="luckdrawRecord" @click="clickRecord"></view>
			</view>
			<view>
				<image class="listImg" :src="listImgUrl" mode=""></image>
				<view class="recordBg">
					<tony-scroll :list="recordList"></tony-scroll>
				</view>
			</view>
		  </view>
		  
	  </view>
	  
	  <login-mask></login-mask>
	</view>
</template>

<script>
	
import GLOBAL_CONFIG from '@/common/config.js'	
import loginMask from '@/components/layout/login-mask.vue'
import slotMachine from '@/components/@lucky-canvas/uni/slot-machine.vue'
import tonyScroll from '@/components/tony-scroll/tony-scroll.vue'
import {
	luckdrawPage,
	winningRecordAll,
	luckyDraw,
	pointsFor,
	insertActivityBrowseRecords
	} from '../../common/api.js'
export default {
   components:{
	 slotMachine,
	 loginMask,
	 tonyScroll
   },
	data() {
		return {
			ruleShow: false,
			bgImgUrl : GLOBAL_CONFIG.yxBaseImageUrl + '/image-server/cj/' + 'chouJiangBg.png',
			topImgUrl : GLOBAL_CONFIG.yxBaseImageUrl + '/image-server/cj/' + 'topIcon.png',
			machineImgUrl : GLOBAL_CONFIG.yxBaseImageUrl + '/image-server/cj/' + 'choujiangMachine.png',
			shareImgUrl : GLOBAL_CONFIG.yxBaseImageUrl + '/image-server/cj/' + 'share.png',
			cjImgUrl : GLOBAL_CONFIG.yxBaseImageUrl + '/image-server/cj/' + 'choujiangBtn.png',
			listImgUrl : GLOBAL_CONFIG.yxBaseImageUrl + '/image-server/cj/' + 'bottomList.png',
			activityId: '',
			activityInfo:{},
			recordList: [],
			number : 12,
			slots: [
			  { speed: 1},
			],
			prizes: [],
			defaultConfig: {
			  mode: 'horizontal',
			  rowSpacing: '10px',
			  colSpacing: '10px'
			},
			time: 0,
			timeNumber: 0,
			resultNumber: 0
		}
	},
	computed:{
	   memberId() {
	   	return this.$store.state.user.userInfo.customerId;
	   },
	   // resultNumber() {
		  //  return this.activityInfo.inventedJoinNumber.toString().padStart(5, '0');
	   // }
	},
	onLoad(op) {
	  this.activityId = op.bizNo;
	  
	  console.log('收到的deptId=>', op.deptId);
	  
	  getApp().globalData.tempDeptId = op.deptId;
	  if(!uni.$u.test.isEmpty(op.deptId)){
		this.$store.commit('user/saveSourceType', 4);
	  	this.$store.commit('user/savedeptId', op.deptId);
	  }
	  
	  getApp().globalData.tempCustomerId = op.customerId;
	  if(!uni.$u.test.isEmpty(op.customerId)){
	  	this.$store.commit('user/saveCustomerId', op.customerId);
	  }
	  
	  this.getLuckdrawPage();
	  this.getWinningRecordAll();
	},
	beforeDestroy() {
		this.insertActivityBrowseRecords()
		clearInterval(this.time)
	},
	methods: {
		insertActivityBrowseRecords() {
			insertActivityBrowseRecords({
				bizNo: this.activityId,
				memberNo: this.$store.state.user.userInfo.customerId,
				browseDuration: this.time,
				tenantId: this.$store.state.user.tenantCode,
				activityType: 4
			}).then(res => {})
		},
		reckonBytime() {
			this.time = setInterval(() => {
				this.timeNumber++
			}, 1000)
		},
	 //获取抽奖页面数据
	 getLuckdrawPage() {
		 luckdrawPage({
			 activityId : this.activityId
		 }).then(res => {
			 this.activityInfo = res;
			 this.resultNumber = this.activityInfo.inventedJoinNumber.toString().padStart(5, '0');
			 var prizeData = res.prize;
			 for (var i = 0; i < prizeData.length; i++) {
			 	let p = prizeData[i];
				console.log(GLOBAL_CONFIG.yxBaseImageUrl + p.url);
				this.prizes.push({
					// background: '#bac5ee',
					borderRadius: '10px',
					fonts:[
						{
							text : p.prizeName, 
							top: '60upx', 
							fontColor:'#F17559', 
							fontSize:'12', 
							id:p.id, 
							index:i,
						},
					],
					imgs: [
						{
							src : GLOBAL_CONFIG.yxBaseImageUrl + p.url||'/image-server/xxhg.png',
							// src : 'http://139.9.242.179/image-server/avatar/2022/02/24/1e5dbb1f-67d3-47a9-bc99-0a3b73aaaebe.jpeg',
							top : '10upx',
							width : '70upx',
							height : '40upx'
						}
					]
				})
			 }
			 setTimeout(()=> {
			 	this.$refs.myLucky.play();
			 },1000)
		 })
	 },
		
	 //立即抽奖按钮的点击事件
	 getluckyDraw() {
		 if(this.$u.test.isEmpty(this.memberId)) {
			 this.$store.dispatch('user/MmvLogin');
		 }else {
			 //调取抽奖活动
			 luckyDraw({
				 bizNo : this.activityId,
				 memberNo : this.memberId
			 }).then(res=> {
				 for (let p of this.prizes) {
					 var font = p.fonts[0];
				 	if(font.id == res.isWinning) {
						 this.$refs.myLucky.stop(font.index);
					}
				 }
			 })  
			 this.$refs.myLucky.play();
		 }
		 
	},
	//获取全部的抽奖记录
	getWinningRecordAll() {
		winningRecordAll().then(res => {
			// this.recordList = res;
			for (var i = 0; i < 10; i++) {
			 	this.recordList=this.recordList.concat(res);
			}
			
		})
	},
	luckyDrawFinish(prize) {
		console.log(prize);
		var currentPrize = prize.fonts[0].text;
		if(currentPrize == '谢谢惠顾') {
			uni.$u.toast('很遗憾,您离奖品只差一丢丢,再接再厉');
		}else {
			uni.$u.toast('恭喜您抽中------'+currentPrize);
		}
		
	},
	
	drawRules() {
	   uni.navigateTo({
	   	url: './activity-lunckdramRules?content=' + this.activityInfo.drawRule
	   })
	},
	
	clickRecord() {
		if(this.$u.test.isEmpty(this.memberId)) {
				  this.$store.dispatch('user/MmvLogin');
				  return
		}
		uni.navigateTo({
			url: './activity-luckdrawRecord'
		})
	},
	onShareAppMessage(res) {
		return {
			title: this.activityInfo.luckdrawName,
			imageUrl : GLOBAL_CONFIG.yxBaseImageUrl + this.activityInfo.fsUrl,
			path:'/pages/activity/activityDetail-sweepstakes?bizNo=' + this.activityId + '&deptId='+this.$store.state.user.deptId + '&customerId=' + this.$store.state.user.userInfo.customerId
		}
	},
   },
   
   onShareTimeline() {
   	return {
   		title: this.activityInfo.luckdrawName,
   		imageUrl : GLOBAL_CONFIG.yxBaseImageUrl + this.activityInfo.fsUrl,
   		path:'/pages/activity/activityDetail-sweepstakes?bizNo=' + this.activityId + '&deptId='+this.$store.state.user.deptId + '&customerId=' + this.$store.state.user.userInfo.customerId
   	}
   }
}
</script>

<style lang="scss" scoped>
	.bg {
	   margin: -15upx -30upx;
	   width: 800upx;
	   height: 1550upx;
	   z-index: -100;
	   position: relative;
	}
	.contentInfo {
		position: absolute;
		left: 0;
		top: 0;
	}
	.topInfo {
		margin-top: 60upx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		.rules {
			width: 70upx;
			height: 90upx;
			padding: 10upx;
			border-top-style: solid;
			border-right-style: solid;
			border-bottom-style: solid;
			border-radius: 0 16upx 16upx 0;
			border-width: 2upx;
			border-color: #000000;
			font-size: 30upx;
		}
		.topImg {
			height: 194upx;
			width: 500upx;
			margin: 0 20upx;
		}
		.shareBg {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.shareImg {
		 position: relative;
		 top : 20upx;
		 width: 30upx;
		 height: 30upx;
		 line-height: 30upx;
		}
	}
	
	.centerInfo {
	   position: relative;
	   margin: 50upx 20upx 0;
	   .machineImg {
		   width: 700upx;
		   height: 774upx;
		   z-index: -50;
	   }
	   .winNumber {
		 position: absolute;
		 top: 40upx;
		 left: 220upx;
		 color: #FFFFFF;
		 font-size: 40upx;
		 letter-spacing: 28upx;
	   }
	   .cjImg {
		 position:  absolute;
		 top: 460upx;
		 left: 182upx;
		 width: 328upx;
		 height: 99upx;
		 z-index: 100;
	   }
	   .listImg {
		 position: relative;
		 top: -60upx;
		 left: 30upx;
		 height: 475upx;
	   }
	}
	
	.prizeBg {
		// background-color: #12B9A3;
		position: absolute;
		top: 260upx;
		left: 80upx;
		width: 544upx;
		height: 170upx;
		z-index: 1000;
		.grid-text {
			font-size: 24upx;
			color: #F17559;
		}
	}
	.recordBg {
		// background-color: #12B9A3;
		position: absolute;
		top: 780upx;
		left: 72upx;
		width: 560upx;
		height: 390upx;
	}
	.playBtn {
		// background-color: #12B9A3;
		position:  absolute;
		top: 200upx;
		left: 100upx;
		width: 340upx;
		height: 99upx;
	}
	.luckdrawRecord {
		// background-color: #12B9A3;
		position:  absolute;
		top: 360upx;
		left: 0upx;
		width: 580upx;
		height: 99upx;
	}
</style>
